<template>
	<view class="container">
		<view class="header">
			<text class="title">添加账号</text>
		</view>
		
		<view class="form">
			<view class="input-box">
				<view class="input-group">
					<input type="text" 
						   v-model="form.username" 
						   placeholder="输入用户名"
						   placeholder-class="placeholder"
						   class="input" />
				</view>
				<view class="input-group">
					<view class="password-input">
						<input :type="showPassword ? 'text' : 'password'"
							   v-model="form.password" 
							   placeholder="输入密码"
							   placeholder-class="placeholder"
							   class="input" />
						<text class="iconfont" 
							  :class="showPassword ? 'icon-eye' : 'icon-eye-close-fill'"
							  @click="togglePassword">
						</text>
					</view>
				</view>
			</view>
			
			<button class="submit-btn" 
					:class="{ 'active': isFormValid }" 
					:disabled="!isFormValid"
					@click="handleLogin">
				登录
			</button>
			
			<!-- 协议勾选 -->
			<view class="agreement">
				<checkbox-group @change="handleAgreementChange">
					<label class="agreement-label">
						<checkbox :checked="isAgree" color="#77b3f7" style="transform:scale(0.7)" />
						<text class="agreement-text">已阅读并同意</text>
						<text class="link">服务协议</text>
						<text class="agreement-text">和</text>
						<text class="link">激励中心隐私保护指引</text>
					</label>
				</checkbox-group>
			</view>
		</view>
		
		<!-- 底部操作栏 -->
		<view class="bottom-actions">
			<view class="action-item">
				<text class="iconfont icon-phone"></text>
				<text class="action-text">手机号登录</text>
			</view>
			<view class="action-item" @click="goRegister">
				<text class="iconfont icon-register"></text>
				<text class="action-text">注册</text>
			</view>
			<view class="action-item" @click="showMoreActions">
				<text class="iconfont icon-more"></text>
				<text class="action-text">更多</text>
			</view>
		</view>
		
		<!-- 更多操作菜单 -->
		<uni-popup ref="popup" type="bottom">
			<view class="more-actions">
				<view class="action-list">
					<view class="action-item" v-for="(item, index) in moreActions" :key="index" @click="handleMoreAction(item)">
						<text class="action-text">{{ item.text }}</text>
					</view>
				</view>
				<view class="cancel" @click="hideMoreActions">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { api } from '@/utils/request'

const form = ref({
	username: '',
	password: ''
})
const isAgree = ref(false)
const showPassword = ref(false)

// 计算表单是否有效
const isFormValid = computed(() => {
	return form.value.username && 
		   form.value.password && 
		   isAgree.value
})

const handleAgreementChange = (e) => {
	isAgree.value = e.detail.value.length > 0
}

const handleLogin = async () => {
	if(!form.value.username || !form.value.password) {
		uni.showToast({
			title: '请输入账号和密码',
			icon: 'none'
		})
		return
	}
	
	if(!isAgree.value) {
		uni.showToast({
			title: '请先同意服务协议',
			icon: 'none'
		})
		return
	}
	
	try {
		const res = await api.login(form.value)
		if(res.code === 200) {
			// 保存完整的用户信息到本地存储
			const userInfo = res.data
			uni.setStorageSync('userInfo', userInfo)
			// 同时单独保存 user_id，方便请求时使用
			uni.setStorageSync('user_id', res.data.user_id)
			
			uni.showToast({
				title: '登录成功',
				icon: 'success'
			})
			
			// 登录成功后跳转到我的页面
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/user/profile'
				})
			}, 1500)
		} else {
			uni.showToast({
				title: res.message || '登录失败',
				icon: 'none'
			})
		}
	} catch(e) {
		console.error(e)
		uni.showToast({
			title: '登录失败',
			icon: 'none'
		})
	}
}

const goRegister = () => {
	uni.navigateTo({
		url: '/pages/user/register'
	})
}

// 更多操作菜单
const popup = ref(null)
const moreActions = [
	{ text: '微信登录', type: 'wechat' },
	{ text: '新浪微博登录', type: 'weibo' },
	{ text: '找回密码', type: 'forgot' },
	{ text: '意见反馈', type: 'feedback' },
	{ text: '关于我们', type: 'about' }
]

const showMoreActions = () => {
	popup.value.open()
}

const hideMoreActions = () => {
	popup.value.close()
}

const handleMoreAction = (item) => {
	hideMoreActions()
	switch(item.type) {
		case 'wechat':
			uni.showToast({
				title: '微信登录功能开发中',
				icon: 'none'
			})
			break
		case 'weibo':
			uni.showToast({
				title: '微博登录功能开发中',
				icon: 'none'
			})
			break
		case 'forgot':
			uni.navigateTo({
				url: '/pages/user/forgot'
			})
			break
		case 'feedback':
			uni.navigateTo({
				url: '/pages/feedback/index'
			})
			break
		case 'about':
			uni.navigateTo({
				url: '/pages/about/index'
			})
			break
	}
}

// 切换密码显示状态
const togglePassword = () => {
	showPassword.value = !showPassword.value
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: #f5f6f7;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	
	.header {
		padding: 40rpx;
		.title {
			font-size: 48rpx;
			font-weight: 500;
			color: #333;
		}
	}
	
	.form {
		padding: 20rpx 40rpx;
		
		.input-box {
			background: #fff;
			border-radius: 20rpx;
			padding: 0 20rpx;
			margin: 0 auto;
			width: 100%;
			box-sizing: border-box;
			
			.input-group {
				position: relative;
				
				// 添加密码输入框样式
				.password-input {
					position: relative;
					display: flex;
					align-items: center;
					
					.input {
						flex: 1;
						padding-right: 80rpx; // 为图标留出空间
					}
					
					.iconfont {
						position: absolute;
						right: 20rpx;
						font-size: 40rpx;
						color: #999;
						padding: 20rpx;
						
						&:active {
							opacity: 0.7;
						}
					}
				}
				
				&:not(:last-child) {
					&::after {
						content: '';
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;
						height: 1rpx;
						background: #eee;
					}
				}
				
				.input {
					width: 100%;
					height: 100rpx;
					font-size: 32rpx;
					box-sizing: border-box;
					padding: 0 20rpx;
				}
				
				.placeholder {
					color: #bbb;
				}
			}
		}
		
		.submit-btn {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			background: #ccc; // 默认为灰色
			color: #fff;
			border-radius: 45rpx;
			font-size: 32rpx;
			margin-top: 60rpx;
			transition: all 0.3s ease; // 添加过渡效果
			
			&.active {
				background: #77b3f7; // 当表单有效时变为蓝色
				
				&:active {
					opacity: 0.8;
				}
			}
			
			&:disabled {
				opacity: 0.7;
				cursor: not-allowed;
			}
		}
		
		.agreement {
			margin-top: 30rpx;
			padding: 0 20rpx;
			
			.agreement-label {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				
				.agreement-text {
					font-size: 24rpx;
					color: #999;
				}
				
				.link {
					font-size: 24rpx;
					color: #77b3f7;
					padding: 0 4rpx;
				}
			}
		}
	}
	
	.bottom-actions {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 40rpx 0;
		display: flex;
		justify-content: space-around;
		background: #fff;
		border-top: 1rpx solid #eee;
		
		.action-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.iconfont {
				font-size: 48rpx;
				color: #666;
				margin-bottom: 10rpx;
			}
			
			.action-text {
				font-size: 24rpx;
				color: #666;
			}
		}
	}
	
	.more-actions {
		background-color: #f5f5f5;
		border-radius: 20rpx 20rpx 0 0;
		padding-bottom: env(safe-area-inset-bottom);
		
		.action-list {
			background-color: #fff;
			border-radius: 20rpx 20rpx 0 0;
			
			.action-item {
				height: 110rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-bottom: 1rpx solid #eee;
				
				.action-text {
					font-size: 32rpx;
					color: #333;
				}
				
				&:active {
					background-color: #f5f5f5;
				}
			}
		}
		
		.cancel {
			margin-top: 20rpx;
			background-color: #fff;
			height: 110rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			color: #333;
			
			&:active {
				background-color: #f5f5f5;
			}
		}
	}
}
</style> 